<template>
  <div
    class="com-chart"
    ref="gauge_ref"
    :style="{width: '100%' , height:'100%'}"
  ></div>
</template>

<script>
import homeview from "@/api/homeview";
export default {
  name: "index",
  data() {
    return {
      chartInstance: null,
      totalRegister: 0, //注册用户总量
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 获取服务器的数据
    getData() {
      homeview
        .getTotalRegister()
        .then((res) => {
          this.totalRegister = res.data.nums;
          // console.log(this.totalRegister);
          this.updateChart();
        })
        .catch((error) => {
          "error";
        });
    },
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.gauge_ref);
      const initOption = {
        tooltip: {
          formatter: "注册用户 <br/> 总数 : {c}",
        },
        series: [
          {
            type: "gauge",
            progress: {
              show: true,
              width: 2,
            },
            axisLine: {
              lineStyle: {
                width: 30, //圆弧部分线宽
                color: [
                  [0.2, "#F27A7D"],
                  [0.8, "#F7D486"],
                  [1, "#C5F9D7"],
                ],
              },
            },
            axisTick: {
              show: false,
            },
            radius: "100%", //圆弧半径
            center: ["50%", "55%"], //圆形相对容器的坐标位置
            splitLine: {
              length: 3, //仪表盘 刻度长
              lineStyle: {
                width: 2, 
                color: "#ffffff", 
              },
            },
            pointer: {
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z", //仪表盘指针样式
              width: 5, ///仪表盘指针针宽度
              offsetCenter: [0, "-60%"],
            },
            axisLabel: {
              distance: 3, //离圆弧 距离
              color: "black",
              fontSize: 10, //度数信息 字体大小
            },
            anchor: {
              show: false,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 10,
              },
            },
            title: {
              show: false,
            },
            min: 0, //起始刻度值
            max: 200, //结束刻度值
            detail: {
              valueAnimation: true,
              fontSize: 40, //圆心处 字号
              color: "black", 
            },
           
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    // 更新图表
    updateChart() {
      const dataOption = {
        series: [
          {
            data: [
              {
                value: this.totalRegister, //实际值
              },
            ],
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
